<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结果</title>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <style>
        body {
            padding-left: 14px;
            padding-top: 14px;
        }

        ul, li {
            list-style: none;
            padding: 0;
        }

        li {
            padding-bottom: 16px;
        }

        a, a:link, a:visited, a:hover, a:active {
            text-decoration: none;
        }

        em {
            color: red;
            font-style: normal;
        }
    </style>
</head>
<body>
<div>
    <input id="newsTag" class="form-control" style="display: inline; width: 50%;" name="keyword">
    <button class="btn btn-primary" onclick="search()">搜索一下</button>
</div>
<hr>
<div>
    <ul id="news">

    </ul>
</div>
</body>
<script>
    $("#newsTag").autocomplete({
        source: "/autoSuggest", // 请求路径
        delay: 100, //请求延迟
        minLength: 1 //最少输入多少字符像服务器发送请求
    })

    function search() {
        var term = $("#newsTag").val();

        $.get("/highLightSearch", {term: term}, function (data) {
            var str = "";
            for (var i = 0; i < data.length; i++) {
                var document = data[i];
                str += "<li>" +
                    "       <h4>" +
                    "           <a href='" + document.url + "' target='_blank'>" + document.title + "</a>" +
                    "       </h4> " +
                    "       <p>" + document.content + "</p>" +
                    "   </li>";
            }
            $("#news").html(str);
        })

    }
</script>
</html>